<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { addBannerFn } from "@/api/banner"; // 导入添加轮播图的接口
import { Plus } from "@element-plus/icons-vue";
import axios from 'axios';

const imageUrl = ref("");
const title = ref(""); // 图片标题输入框的绑定
const file = ref(null); // 存储待上传的文件

// 上传前检查
const beforeAvatarUpload = (rawFile) => {
    if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
        ElMessage.error("轮播图片必须为 JPG 或 PNG 格式！");
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("图片大小不能超过 2MB！");
        return false;
    }
    file.value = rawFile; // 存储文件
    imageUrl.value = URL.createObjectURL(rawFile); // 预览图片
    return false; // 阻止默认上传行为
};

// 点击确定后调用接口并上传图片
const submitBanner = () => {
    if (!file.value || !title.value) {
        ElMessage.error("请完整填写图片和标题！");
        return;
    }

    // 创建 FormData，并添加图片文件和标题
    const formData = new FormData();
    formData.append("title", title.value);
    formData.append("image", file.value);

    // 调用添加轮播图接口
    axios.post('/banner/add', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then((response) => {
        ElMessage.success("图片上传成功！");
        clearForm(); // 上传成功后清空表单
    }).catch((error) => {
        ElMessage.error("上传失败，请重试！");
        console.error(error);
    });
};

// 点击取消时清空表单
const clearForm = () => {
    imageUrl.value = "";
    title.value = "";
    file.value = null;
};
</script>

<template>
    <h2>添加轮播图</h2>
    <div class="banner">
        <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            action=""
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

        <div class="right">
            <el-input v-model="title" placeholder="请输入图片的标题"></el-input>

            <span>
                <el-button type="success" @click="submitBanner">确定</el-button>
                <el-button type="warning" @click="clearForm">取消</el-button>
            </span>
        </div>
    </div>
</template>


<style scoped>
h2 {
    padding-left: 20px;
}

.banner {
    display: flex;

    .right {
        margin-top: 20px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300px;

        .el-input {
            height: 30px;
            width: 400px;
        }

        span {
            width: 400px;
            display: flex;
            justify-content: space-evenly;
        }
    }
}

.avatar-uploader .avatar {
    width: 300px;
    height: 300px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-left: 20px;
    margin-top: 20px;
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 300px;
    text-align: center;
}
</style>
